<!-- 车辆弹窗 -->
<template>
  <div class="vehicle-wp" v-loading="tableLoading" element-loading-text="拼命加载中">
    <div class="com-content">
      <el-form :inline="true" size="small" :model="form" class="com-form">
        <el-form-item label="服务器名称">
          <el-input v-model="form.appName" placeholder="请输入服务器名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- com-hd样式写在public.scss里 -->
      <div class="com-hd">
        <el-button size="small" icon="el-icon-plus" type="primary" @click="$refs.csDialog.open()">添加用户</el-button>
        <el-button size="small" icon="el-icon-upload2" type="primary">导入</el-button>
        <el-button size="small" icon="el-icon-download" type="primary">导出</el-button>
      </div>

      <el-table :data="table.data" style="width: 100%"
        stripe
        fit
        border
        highlight-current-row
        :header-cell-style="{background: '#F5FBFF',color: '#555555'}">
        <el-table-column v-for="(item, index) in table.head" :key="index" 
          :prop="item.key"
          :label="item.name"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <page :page="page" @change="changePage"></page>
    </div>

    <!-- 测试 -->
    <cs-dialog ref="csDialog"></cs-dialog>
  </div>
</template>
<script>

import csDialog from "@/dialogs/cs-dialog.vue";
import TableMixin from "@/mixins/TableMixin.js";
import {user} from "@/config/api.js";

export default {
  name: 'vehicle',
  mixins: [TableMixin],
  components: {
    csDialog,
  },
  data () {
    return {
      form: {
        appName: '', // 应用名称
        bbb: '',
      },

      table: {
        head: [
          {name: '应用名称', key: 'appName'},
          {name: '应用状态', key: 'statusStr'},
        ],
        data: [
          {appName: '热热先吃饭', statusStr: 'kljkwlejklwe'},
          {appName: '发士大夫', statusStr: 'kljkwlejklwe'},
          {appName: '台湾人他', statusStr: 'kljkwlejklwe'},
        ]
      },
    }
  },
  mounted () {
    this.search(); // search是写在mixins/TableMixin.js里的，会调用getData
  },
  methods: {
    getData () {
      // 调用接口方法
      // var param = {
      //   name: this.req.appName, // this.req在mixins/TableMixin.js里，search会拷贝form到req
      //   bbb: this.req.bbb,
      // }
      // this.$get(user.xxx, param).then(res => {
      //   console.log(res);
      //  // 处理接口返回数据
      //  // this.table.data = res.result.list;
      //  // this.page.totalPage = res.result.total;
      // })


      // this.tableLoading = true;
      // setTimeout(() => {
      //   this.tableLoading = false;
      // }, 1000);
    }
  }
}
</script>
<style lang="scss" scoped>
.vehicle-wp {
  
}
</style>